<template>
  <div style="display: flex">
    <div class="content-area">
      <!--      信息通知-->
      <div style="margin-top: 10px;width: 550px;height: 440px; margin-left: 40px;border: 1px solid #EAEAEA">
        <div class="hiddens">系统</div>
        <hr>
        <div style="display: flex">
          <div class="hiddens">
            <div class="hiddens">审核通知</div>
            <div style="font-size: 12px" class="hiddens">当收到项目审核结果时</div>
          </div>
          <div class="hiddens">
            <el-select @change="isChange" v-model="userMessage.notice" placeholder=""
                       style="width: 130px;margin-left: 188%">
              <el-option label="接受信息通知" :value=0 />
              <el-option label="不接收" :value=1 />
            </el-select>
          </div>
        </div>
        <hr>
        <div class="hiddens">通知</div>
        <hr>
        <div style="display: flex">
          <div class="hiddens">
            <div class="hiddens">评论</div>
            <div class="hiddens" style="font-size: 12px">当收到新的评论时</div>
          </div>
          <div class="hiddens">
            <el-select @change="isChange" v-model="userMessage.systems" style="width: 130px;margin-left: 207%">
              <el-option label="接受信息通知" :value=0 />
              <el-option label="不接收" :value=1 />
            </el-select>
          </div>
        </div>
        <hr>
        <div class="hiddens">私信</div>
        <hr>
        <div style="display: flex">
          <div class="hiddens">
            <div class="hiddens">私信通知</div>
            <div class="hiddens" style="font-size: 12px">当收到新的私信时</div>
          </div>
          <div class="hiddens">
            <el-select @change="isChange" v-model="userMessage.message" :placeholder="userMessage.message" style="width: 130px;margin-left: 207%">
              <el-option label="接受信息通知" :value=0 />
              <el-option label="不接收" :value=1 />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {getUserMessage, updateUserMessageStatus} from "@/pages/userData/userApi.js";
const props = defineProps({
  userId: {
    type: Number,
    default: 0
    }
})
const userMessage = ref({
  notice: 0,
  systems: 0,
  message: 0
})
const getUserMessageStatus = async () => {
  await getUserMessage(props.userId).then(res=>{
    if (res.code === 0 && res.data!== null){
      userMessage.value = res.data
    }
  })
}
onMounted(() => {
  getUserMessageStatus()
});
const isChange = async () => {
  await updateUserMessageStatus(userMessage.value).then(res => {
    if (res.code === 0) {
      getUserMessageStatus()
    }
  })
}
</script>


<style scoped>
.avatar-uploader img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.titles {
  text-align: right;
  width: 100px;
  height: 600px;
  margin-left: 20px;
  background: whitesmoke;
}

.hiddens {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.updater {
  width: 500px;
  height: 300px;
  border: 1px solid mintcream;
  box-shadow: 0.5px 0.5px 0.5px 1px #888888;
  border-radius: 4px;
}

.content-area {
  width: 800px;
  height: 600px;

}

.upload-demo {
  width: 300px;
  padding: 10px;
}

.el-icon--upload {
  width: 40px;
  height: 40px;
}

.el-upload__text {
  font-size: 15px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.avatar-box-border {
  border: 1px dashed #409eff !important;
}
</style>

